<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>角色</title>

<script src="assets/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="assets/js/bootstrap/css/bootstrap.min.css" />

<link rel="stylesheet"
	href="assets/js/bootstrap-table/bootstrap-table.min.css" />

<script src="assets/js/bootstrap/js/bootstrap.min.js"></script>

<script src="assets/js/bootstrap-table/bootstrap-table.min.js"></script>


<script src="assets/js/knockout/knockout-min.js"></script>
<script src="assets/js/knockout/knockout.bootstraptable.js"></script>
<script src="assets/js/knockout/knockout.mapping.js"></script>

<script type="text/javascript">

	//操作
	var operate = {
		//初始化按钮事件
		operateInit : function() {
			this.operateAdd();
			this.operateUpdate();
			this.operateDelete();
			this.DepartmentModel = {
				id : ko.observable(),
				Name : ko.observable(),
				Level : ko.observable(),
				Des : ko.observable(),
				CreateTime : ko.observable()
			};
		},
		//新增
		operateAdd : function() {
			$('#btn_add').on("click", function() {
				$("#myModal").modal().on("shown.bs.modal", function() {
					var oEmptyModel = {
						id : ko.observable(),
						Name : ko.observable(),
						Level : ko.observable(),
						Des : ko.observable(),
						CreateTime : ko.observable()
					};
					ko.utils.extend(operate.DepartmentModel, oEmptyModel);
					ko.applyBindings(operate.DepartmentModel, document.getElementById("myModal"));
					operate.operateSave();
				}).on('hidden.bs.modal', function() {
					ko.cleanNode(document.getElementById("myModal"));
				});
			});
		},
		//编辑
		operateUpdate : function() {
			$('#btn_edit').on("click", function() {
				$("#aeDialog").modal().on("shown.bs.modal", function() {
					var arrselectedData = tableInit.myViewModel.getSelections();
					if (!operate.operateCheck(arrselectedData)) {
						return;
					}
					//将选中该行数据有数据Model通过Mapping组件转换为viewmodel
					ko.utils.extend(operate.DepartmentModel, ko.mapping.fromJS(arrselectedData[0]));
					ko.applyBindings(operate.DepartmentModel, document.getElementById("myModal"));
					operate.operateSave();
				}).on('hidden.bs.modal', function() {
					//关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件)
					ko.cleanNode(document.getElementById("myModal"));
				});
			});
		},
		//删除
		operateDelete : function() {
			$('#btn_delete').on("click", function() {
				var arrselectedData = tableInit.myViewModel.getSelections();
				$.ajax({
					url : "/Department/Delete",
					type : "post",
					contentType : 'application/json',
					data : JSON.stringify(arrselectedData),
					success : function(data, status) {
						alert(status);
					//tableInit.myViewModel.refresh();
					}
				});
			});
		},
		//保存数据
		operateSave : function() {
			$('#btn_submit').on("click", function() {
				//取到当前的viewmodel
				var oViewModel = operate.DepartmentModel;
				//将Viewmodel转换为数据model
				var oDataModel = ko.toJS(oViewModel);
				var funcName = oDataModel.id ? "Update" : "Add";
				$.ajax({
					url : "/Department/" + funcName,
					type : "post",
					data : oDataModel,
					success : function(data, status) {
						alert(status);
						tableInit.myViewModel.refresh();
					}
				});
			});
		},
		//数据校验
		operateCheck : function(arr) {
			if (arr.length <= 0) {
				alert("请至少选择一行数据");
				return false;
			}
			if (arr.length > 1) {
				alert("只能编辑一行数据");
				return false;
			}
			return true;
		}
	}
</script>


<script type="text/javascript">
	//初始化
	$(function() {
		//1、初始化表格
		tableInit.Init();

		//2、注册增删改事件
		operate.operateInit();
	});

	//初始化表格
	var tableInit = {
		Init : function() {
			//绑定table的viewmodel
			this.myViewModel = new ko.bootstrapTableViewModel({
				url : '/role/get', //请求后台的URL（*）
				method : 'get', //请求方式（*）
				toolbar : '#toolbar', //工具按钮用哪个容器
				queryParams : function(param) {
					return {
						limit : param.limit,
						offset : param.offset
					};
				}, //传递参数（*）
				responseHandler : function(res) {
					//这里我查看源码的，在ajax请求成功后，发放数据之前可以对返回的数据进行处理，返回什么部分的数据，比如我的就需要进行整改的！
					return res.data;
				},
				pagination : true, //是否显示分页（*）
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 10, //每页的记录行数（*）
				pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
			});
			ko.applyBindings(this.myViewModel, document.getElementById("tb_dept"));
		}
	};
</script>
</head>

<body>
	<div id="toolbar" class="btn-group">
		<button id="btn_add" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		</button>
		<button id="btn_edit" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
		</button>
		<button id="btn_delete" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		</button>
	</div>
	<table id="tb_dept" data-bind="myBootstrapTable:$root">
		<thead>
			<tr>
				<th data-checkbox="true"></th>
				<th data-field="roleName">角色名</th>
				<th data-field=description>描述</th>
			</tr>
		</thead>
	</table>


	<div class="modal fade" id="aeDialog" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">操作</h4>
				</div>
				<div class="modal-body">

					<div class="form-group">
						<label for="txt_departmentname">角色名</label> <input type="text"
							name="txt_roleName" data-bind="value:roleName"
							class="form-control" id="roleName" placeholder="部门名称">
					</div>

					<div class="form-group">
						<label for="txt_des">描述</label> <input type="text" name="txt_des"
							data-bind="value:Des" class="form-control" id="txt_des"
							placeholder="描述">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
					</button>
					<button type="button" id="btn_submit" class="btn btn-primary"
						data-dismiss="modal">
						<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
					</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
